
<script>
import { useVModel } from '@vueuse/core'
import {provide} from "vue"
export default {
name:'XtxTabs',
props:{
  modelValue:{
    type:[String,Number],
    default:''
  }
},
setup(props,{emit}){
  const activeName=useVModel(props,'modelValue',emit)
  // const activeName=props.modelValue
  console.log(activeName);
 
  const tabClick=(name,index)=>{
    activeName.value=name
    console.log(index);
    //提供一个自定义事件，目标：当点击tab切换使需要做的事情
    emit('tab-click' ,{name,index})
  }
   provide('activeName',activeName)
  return {activeName,tabClick} 
},
render(){
    const panel=this.$slots.default()
    const dynamicPanel=[]
    panel.forEach(item=>{
      console.log(item);
        if(item.type.name==='XtxTabsPannel'){
            dynamicPanel.push(item)
        }else{
            item.children.forEach(items=>{
                dynamicPanel.push(items)
            })
        }
    })
  const nav=<nav>{
  dynamicPanel.map((it,i)=>{
    return <a href="javascript:;" class={{active:it.props.name===this.activeName}} onClick={()=>this.tabClick(it.props.name,i)}>{it.props.label}</a>
  })
  }</nav>
 
  return <div class="xtx-tabs">{[nav,dynamicPanel]}</div>
}

}
</script>

<style scoped lang="less">
.xtx-tabs {
  background: #fff;
  > nav {
    height: 60px;
    line-height: 60px;
    display: flex;
    border-bottom: 1px solid #f5f5f5;
    > a {
      width: 110px;
      border-right: 1px solid #f5f5f5;
      text-align: center;
      font-size: 16px;
      &.active {
        border-top: 2px solid @xtxColor;
        height: 60px;
        background: #fff;
        line-height: 56px;
      }
    }
  }
}
</style>